<template>
  <div class="py-4">
    <!-- tab 按钮，切换swiper中的slide -->
    <ul class="flex items-center w-full justify-evenly pb-4">
      <li
        v-for="(item, index) in titles"
        :key="index"
        @click="
          {
            swiperRef?.slideTo(index, 500);
            activeIndex = index;
          }
        "
        :class="[
          'flex flex-col items-center cursor-pointer transition-all text-gray-400 hover:text-orange group',
          { 'text-orange': activeIndex === index },
        ]"
      >
        <div
          :class="[
            'text-2xl border-b-2 pb-2 px-2 group-hover:border-b-color-orange',
            { 'border-b-color-orange': activeIndex === index },
          ]"
        >
          {{ index + 1 }}
        </div>
        <div class="pt-4">
          {{ item }}
        </div>
      </li>
    </ul>
    <swiper
      :slides-per-view="1"
      :space-between="0"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      :modules="modules"
      :navigation="{ prevEl: '.prev', nextEl: '.next' }"
      :pagination="{
        clickable: true,
        bulletClass:
          'inline-block w-3 h-3 rounded-1/2 bg-gray-300 z-20 mr-4 cursor-pointer',
        bulletActiveClass: 'w-8! bg-orange rounded-3',
      }"
      loop
      :style="{ height: (width / 1200) * height + 'px' }"
      v-bind="$attrs"
    >
      <swiper-slide v-for="(item, index) in items" :key="index">
        <slot :item="item">
          <div
            class="bg-image bg-contain"
            :style="{ backgroundImage: `url(${item})` }"
          ></div>
        </slot>
      </swiper-slide>
      <!-- <slot name="pagination"> -->
      <div v-if="!$attrs.pagination_hiden">
        <!-- 圆形外框 -->
        <div
          class="rounded-1/2 bg-white shadow-lg w-15 h-15 absolute left-2 top-1/2 transform-rotate-y--1/2 z-30 border flex justify-center items-center cursor-pointer group"
        >
          <div
            class="prev i-ep:arrow-left text-gray-300 group-hover:text-gray-700"
            style="font-size: 1.5rem"
          ></div>
        </div>
        <div
          class="rounded-1/2 bg-white shadow-lg w-15 h-15 absolute right-2 top-1/2 transform-rotate-y--1/2 z-30 border flex justify-center items-center cursor-pointer group"
        >
          <div
            class="next i-ep:arrow-right text-gray-300 group-hover:text-gray-700"
            style="font-size: 1.5rem"
          ></div>
        </div>
      </div>
      <!-- <div v-if="!$attrs.pagination_hide">
        <div
          class="rounded-1/2 bg-white shadow-lg w-15 h-15 absolute left-2 top-1/2 transform-translate-y--1/2 z-30 border flex justify-center items-center cursor-pointer group"
        >
          <div
            class="prev i-ep:arrow-left text-gray-300 group-hover:text-gray-700"
            style="font-size: 2rem"
          ></div>
        </div>
        <div
          class="rounded-1/2 bg-white shadow-lg w-15 h-15 absolute right-2 top-1/2 transform-translate-y--1/2 z-30 border flex justify-center items-center cursor-pointer group"
        >
          <div
            class="next i-ep:arrow-right text-gray-300 group-hover:text-gray-700"
            style="font-size: 2rem"
          ></div>
        </div>
      </div> -->
      <!-- </slot> -->
    </swiper>
  </div>
</template>
<script setup lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";
import type { Swiper as SwiperType } from "swiper/types";
import { Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
const swiperRef = ref<SwiperType>();
const activeIndex = ref<number>(0);
const modules = [Navigation, Pagination];
const emits = defineEmits(["change"]);
const { width } = useWindowSize(); //获取窗口宽度
const props = defineProps({
  height: {
    type: Number,
    default: "1200", // 72 * 0.25rem
  },
  items: {
    type: Array as PropType<Array<String>>,
    default: () => [],
  },
  titles: {
    type: Array as PropType<Array<String>>,
    default: () => [],
  },
});

const onSwiper = (swiper: SwiperType) => {
  console.log(swiper);
  swiperRef.value = swiper;
};
const onSlideChange = (e: SwiperType) => {
  console.log("slide change");
  emits("change", e);
  activeIndex.value = e.activeIndex;
};
</script>
<style scoped lang="scss">
.swiper-button-disabled {
  color: rgba($color: #000, $alpha: 0.3);
}
</style>
